<template>
	<div>
   <el-card :body-style="{padding: '15px 120px'}" class="page">
	   <el-form ref="form" :model="form" label-width="100px" label-suffix=":" :rules="rules">
		 <el-alert title="商品属性" type="info" :closable="false" class="title"/>
			 <el-form-item label="商品品类" prop="goods_class">
			   <el-radio-group v-model="form.goods_class">
				 <el-radio v-for="item in catetorys" :key="item.cate_id" :label="item.cate_id">{{ item.cate_name }}</el-radio>
			   </el-radio-group>
			 </el-form-item>
			 <el-form-item label="是否回桶" prop="is_recovery">
			   <el-radio-group v-model="form.is_recovery">
			 	 <el-radio v-for="item in is_sales" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
			   </el-radio-group>
			 </el-form-item>
			 <el-form-item label="商品分类" prop="cate_id">
			    <el-select
				 v-model="form.cate_id"
				 filterable
				>
					<el-option
					 v-for="item in cate_ids"
		             :key="item.cate_id" 
					 :label="item.cate_name"
					 :value="item.cate_id"
					/>
				</el-select>
			 </el-form-item>
			 
		 <el-alert title="基础属性" type="info" :closable="false" class="title"/>
			 <el-form-item label="商品标题" prop="goods_name">
			   <el-input
				v-model="form.goods_name"
				clearable
				class="input"
			   />
			 </el-form-item>
			 <el-form-item label="商品副标题" prop="goods_subtitle">
			   <el-input
				v-model="form.goods_subtitle"
				clearable
				class="input"
			   />
			 </el-form-item>
			 <el-form-item label="计量单位" prop="goods_units">
			   <el-radio-group v-model="form.goods_units">
				 <el-radio v-for="item in units" :key="item" :label="item">{{ item }}</el-radio>
			   </el-radio-group>
			 </el-form-item>
		 <el-alert title="销售属性" type="info" :closable="false" class="title"/>
			 <el-form-item label="单价" prop="price">
			   <el-input-number
			    class="input"
				v-model="form.price"
				:controls="false"
				step-strictly
				:step="0.01"
				:min="0"
			   />
			 </el-form-item>
			 <el-form-item label="总库存" prop="stock">
			   <el-input-number
			    class="input"
				v-model="form.stock"
				:controls="false"
				step-strictly
				:step="1"
				:min="0"
			   />
			 </el-form-item>
			 <el-form-item label="设置套餐价" prop="is_sale">
			   <el-radio-group v-model="form.is_sale">
				 <el-radio v-for="item in is_sales" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
			   </el-radio-group>
			 </el-form-item>
			 
			 <el-form-item label="套餐类型" prop="sale">
			   <el-checkbox-group v-model="saleList">
				 <el-checkbox label="标准套餐"></el-checkbox>
				 <el-checkbox label="套餐1"></el-checkbox>
				 <el-checkbox label="套餐2"></el-checkbox>
				 <el-checkbox label="套餐3"></el-checkbox>
			   </el-checkbox-group>
			   <el-table
			     :data="form.sale"
				 border
				 stripe
			   >
				   <el-table-column label="套餐名" align="center">
					   <template slot-scope="scope">
						   <el-input
							 v-model="scope.row.sale_title"
						   />
					   </template>
				   </el-table-column>
				   <el-table-column label="套餐内商品数" align="center">
					   <template slot-scope="scope">
						   <el-input-number
						    class="input"
							style="width: 100%;"
							v-model="scope.row.sale_num"
							:controls="false"
							step-strictly
							:step="1"
							:min="0"
						   />
					   </template>
				   </el-table-column>
				   <el-table-column label="总价" align="center">
					   <template slot-scope="scope">
						   <el-input-number
						    class="input"
							style="width: 100%;"
							v-model="scope.row.sale_price"
							:controls="false"
							step-strictly
							:step="0.01"
							:min="0"
						   />
					   </template>
				   </el-table-column>
				   <el-table-column label="套餐折扣价" align="center">
					   <template slot-scope="scope">
						  <el-input-number
						    class="input"
							style="width: 100%;"
							v-model="scope.row.sale_money"
							:controls="false"
							step-strictly
							:step="0.01"
							:min="0"
						  />
					   </template>
				   </el-table-column>
			   </el-table>
			 </el-form-item>
		 <el-alert title="图文描述" type="info" :closable="false" class="title"/>
		     <el-form-item label="图片展示" prop="img">
				 <el-upload
				   ref="upload"
				   action="/api/admin/upload_file"
				   list-type="picture-card"
				   :on-success="handleSuccess"
				   :on-preview="handlePictureCardPreview"
				   :on-remove="handleRemove">
				   <i class="el-icon-plus"></i>
				 </el-upload>
				 <el-dialog top="10vh" :visible.sync="dialogImageVisible">
				   <img width="100%" height="500px" :src="dialogImageUrl" alt="">
				 </el-dialog>
			 </el-form-item>
			 <el-form-item label="图文描述" prop="goods_desc">
				 <quill-editor
					 class="editor" 
					 ref="myTextEditor"
					 v-model="form.goods_desc"
					 :options="editorOption"
				 />
			 </el-form-item>
	   </el-form>
   </el-card>
   <div style="height: 70px;"/>
	<div class="submit-bar">
		<el-button type="info" @click="back">返回</el-button>
		<el-button type="primary" style="margin: 0 50px;" @click="baocun">保存新建</el-button>
		<el-checkbox v-model="form.shelf_status" :true-label="1" :false-label="2">立即上架</el-checkbox>
	</div>	   
	</div>
</template>

<script>
import { options } from '../options.js'	
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'	
	
export default {
  mixins: [ options ],
  components:{ quillEditor },	  
  data() {
    return {
	  form:{
		cate_id: 0,
		cate_name: "",
		goods_class: 0,
		goods_desc: "",
		goods_id: 0,
		goods_name: "",
		goods_sku: "",
		goods_subtitle: "",
		goods_units: "",
		img: [],
		is_recovery: 2,
		is_sale: 2,
		p_id: 0,
		price: 0,
		sale: [],
		stock: 0,
		shelf_status: 2  
	  },
	  rules: {
		  goods_name: [
			  { required: true, message: '请输入', trigger: 'blur' },
		  ],
		  goods_subtitle: [
			  { required: true, message: '请输入', trigger: 'blur' },
		  ],
		  goods_units: [
			  { required: true, message: '请输入', trigger: 'blur' },
		  ],
		  price: [
			  { required: true, message: '请输入', trigger: 'blur' },
		  ],
		  stock: [
			  { required: true, message: '请输入', trigger: 'blur' },
		  ],
		  img: [
			  { type: 'array', required: true, message: '请输入', trigger: 'blur' },
		  ],
		  goods_desc: [
			  { required: true, message: '请输入', trigger: 'blur' },
		  ]
	  },
			
	  dialogImageVisible: false,		
	  dialogImageUrl: '',
	  
	  saleList: []				
    };
  },
  watch:{
	saleList(curval,oldval){
	   if(curval.length > oldval.length){
		   this.form.sale.push(
		     {
				 sale_money: 0,
				 sale_price: 0,
				 sale_num: 0,
				 sale_title: "",
				 sale_type: curval[curval.length - 1],
			 }
		   )
	   } else {
		   for (let i = 0; i < this.form.sale.length; i ++){
			   if (curval.indexOf(this.form.sale[i].sale_type) < 0){
				   this.form.sale.splice(i, 1)
				   break
			   }
		   }
	   }
	}  
  },
  created(){
	 if (this.$route.query.method === 'update'){
		this.service({
		  method: "post",
		  url: "/api/admin/getGoodsInfo",
		  data:{
			  goods_id: this.$route.query.id,
			  token: this.$getToken()
		  }
		}).then(res => {
		   if(res.error_code === 200){
			  Object.assign(this.form, res.data.list)			  
			  this.$refs.upload.fileList = this.form.img.map(item =>{
				  return {
					  url: this.configUrl + item.adv_img
				  }
			  })
			  this.form.sale = this.form.sale.map(item => {
				  this.saleList.push(item.sale_type)
				  return Object.assign({
					  sale_num: 0
				  }, item)
			  })
		   } else {
			  this.$message.error("获取商品信息失败") 
		   }
		});  
	 }
  },
  methods: {
	  handleSuccess(res, file, fileList){
		console.log(res, file, fileList)
		this.form.img.push({ adv_img: res.data })
		this.$refs.upload.fileList.splice(this.$refs.upload.fileList.length, 1, {
			url: this.configUrl + res.data
		})
	  },
	  handleRemove(file, fileList) {
		console.log(file, fileList);
		for(const v of this.form.img){
			if(file.url.indexOf(v.adv_img) >= 0){
				const index = this.form.img.indexOf(v)
				this.form.img.splice(index, 1)
				break
			}
		}
	  },
	  handlePictureCardPreview(file) {
	    this.dialogImageUrl = file.url;
	    this.dialogImageVisible = true;
	  },
      back() {
        this.$confirm('是否放弃保存当前商品信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
		  this.$router.push({path: '/example/table'})	
          this.$message({
            type: 'success',
            message: '已放弃保存!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消保存'
          });          
        });
      },
      baocun() {
		this.$refs.form.validate((valid) => {
			if(valid){
			this.$confirm('当前修改后的数据将无法找回，你还要继续吗？', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
			  const param = {
				  token: this.$getToken(),	
				  status: this.$route.query.method,
				  goods_id: this.form.goods_id,
				  goods_class: this.form.goods_class,
				  is_recovery: this.form.is_recovery,
				  cate_id: this.form.cate_id,
				  goods_name: this.form.goods_name,
				  goods_units: this.form.goods_units,
				  goods_subtitle: this.form.goods_subtitle,
				  shelf_status: this.form.shelf_status,
				  price: this.form.price,
				  stock: this.form.stock,
				  is_sale: this.form.is_sale,
				  goods_desc: this.form.goods_desc,
				  sale: this.form.sale,
				  goods_img: this.form.img.map(item=>{return {img: item.adv_img}})
			  }					  
			  this.service({
				method: "post",
				url: "/api/admin/saveGoodsInfo",
				data:param
			  }).then(res => {
				console.log(res)
				this.$router.push({path: '/example/table'})
				this.$message({
				  type: 'success',
				  message: '保存成功!'
				});
			  });	  
			}).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消保存'
          });          
        });
		}
      })
	  }
    }
};
</script>

<style lang="scss" scoped>
.page{
	margin: 10px;
}	
.input{
	width: 36%;
	
	/deep/ .el-input__inner{
		text-align: left;
	}
}
.title{
	margin-bottom: 15px;
}
.submit-bar{
	background-color: white;
	position: fixed;
	bottom: 0;
	z-index: 100;
	width: 100%;
	height: 70px;
	left: 100px;
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
<style>
  .editor {
    line-height: normal !important;	
  }
  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: '保存';
      padding-right: 0px;
  }
 
  .ql-snow .ql-tooltip[data-mode=video]::before {
      content: "请输入视频地址:";
  }
 
  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
  }
 
  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: '标题1';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: '标题2';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: '标题3';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: '标题4';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: '标题5';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: '标题6';
  }
 
  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    content: '衬线字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    content: '等宽字体';
  }
  </style>